<template>
  <div class="contents">
    <!-- 地图背景层 - 铺满整个大屏 -->
    <div class="map-background">
      <ItemWrap class="map-container" title="" :no-border="true" style="height: 100%; margin: 0; padding: 0">
        <CenterMap ref="centerMap" style="height: 100%" />
      </ItemWrap>
    </div>

    <!-- 背景图层 - 位于地图之上，图表之下 -->
    <div class="background-image bg2" />
    <div class="background-image pageBg" />

    <!-- 左侧浮动图表 -->
    <div class="floating-left">
      <div class="pagetab">
        <!-- <div class="item">实时监测</div> -->
      </div>
      <div class="contetn_left-top contetn_lr-item">
        <LeftTop :radar-id="currentRadarId" />
      </div>
      <div class="contetn_left-center contetn_lr-item">
        <LeftCenter :radar-id="currentRadarId" />
      </div>
      <!-- toBefor图片 - 位于左侧图表右边 -->
      <div class="to-befor-image" @click="switchToPreviousRadar">
        <img src="@/assets/xing-bian-screen/img/toBefor.png" alt="toBefor" />
      </div>
    </div>

    <!-- 右侧浮动图表 -->
    <div class="floating-right">
      <div class="contetn_right-top contetn_lr-item">
        <RightTop :radar-id="currentRadarId" />
      </div>
      <div class="contetn_right-center contetn_lr-item">
        <RightCenter :radar-id="currentRadarId" />
      </div>
      <!-- toAfter图片 - 位于右侧图表左边 -->
      <div class="to-after-image" @click="switchToNextRadar">
        <img src="@/assets/xing-bian-screen/img/toAfter.png" alt="toAfter" />
      </div>
    </div>

    <!-- 底部中间图表组件 -->
    <div class="contetn_bottom_center">
      <ItemWrap class="contetn_center-bottom no-border" title="" :no-border="true" style="padding: 0 0 0 0">
        <CenterBottom :radar-id="currentRadarId" />
      </ItemWrap>
    </div>

    <!-- 底部左侧浮动图表 -->
    <div class="floating-bottom-left">
      <!-- <div class="contetn_lr-item"> -->
      <LeftBottom />
      <!-- </div> -->
    </div>

    <!-- 底部右侧浮动图表 -->
    <div class="floating-bottom-right">
      <!-- <div class="contetn_lr-item"> -->
      <RightBottom />
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import LeftTop from "./left-top.vue";
import LeftCenter from "./left-center.vue";
import LeftBottom from "./left-bottom.vue";
import CenterMap from "./center-map.vue";
import CenterBottom from "./center-bottom.vue";
import RightTop from "./right-top.vue";
import RightCenter from "./right-center.vue";
import RightBottom from "./right-bottom.vue";
import ItemWrap from "@/components/xing-bian-screen/item-wrap/item-wrap.vue";

export default {
  components: {
    LeftTop,
    LeftCenter,
    LeftBottom,
    CenterMap,
    RightTop,
    RightCenter,
    RightBottom,
    CenterBottom,
    ItemWrap
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    }
  },
  data() {
    return {
      currentRadarId: 6 // 当前选中的雷达ID，默认为6
    };
  },
  created() {},

  mounted() {},
  methods: {
    // 切换到上一个雷达
    switchToPreviousRadar() {
      this.$store.commit("setSelectPointKey", []);
      // 通过事件总线通知 CenterMap 组件
      const radarId = this.$refs.centerMap?.switchToPreviousRadar();
      if (radarId) {
        this.currentRadarId = radarId;
      }
    },

    // 切换到下一个雷达
    switchToNextRadar() {
      this.$store.commit("setSelectPointKey", []);
      // 通过事件总线通知 CenterMap 组件
      const radarId = this.$refs.centerMap?.switchToNextRadar();
      if (radarId) {
        this.currentRadarId = radarId;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
// 内容
.contents {
  position: relative;
  height: 94%;
  overflow: hidden;

  // 地图背景层 - 铺满整个大屏
  .map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; // 改为100%，铺满整个大屏
    z-index: 1;

    .map-container {
      width: 100%;
      height: 100%;
    }
  }

  // 背景图层 - 位于地图之上，图表之下
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; // 位于地图(z-index: 1)之上，图表(z-index: 10)之下
    pointer-events: none; // 不影响点击事件
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    &.bg2 {
      background-image: url("../../../assets/xing-bian-screen/img/bg2.png");
    }

    &.pageBg {
      background-image: url("../../../assets/xing-bian-screen/img/pageBg.png");
      mix-blend-mode: multiply; // 使用混合模式让两个背景图叠加显示
      opacity: 0.8; // 调整透明度以获得更好的混合效果
    }
  }

  // 左侧浮动图表
  .floating-left {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 450px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 20px;

    .pagetab {
      // 保持原有样式
    }

    // toBefor图片样式
    .to-befor-image {
      position: absolute;
      right: -80px; // 位于左侧图表右边
      top: 50%; // 垂直居中
      transform: translateY(-50%);
      z-index: 15;
      cursor: pointer; // 添加鼠标指针样式

      img {
        width: 60px;
        height: auto;
        opacity: 0.7;
        transition: opacity 0.3s ease, transform 0.3s ease;

        &:hover {
          opacity: 1;
          transform: scale(1); // 鼠标悬停时放大
        }
      }
    }
  }

  // 右侧浮动图表
  .floating-right {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 450px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 20px;

    // toAfter图片样式
    .to-after-image {
      position: absolute;
      left: -80px; // 位于右侧图表左边
      top: 50%; // 垂直居中
      transform: translateY(-50%);
      z-index: 15;
      cursor: pointer; // 添加鼠标指针样式

      img {
        width: 60px;
        height: auto;
        opacity: 0.7;
        transition: opacity 0.3s ease, transform 0.3s ease;

        &:hover {
          opacity: 1;
          transform: scale(1); // 鼠标悬停时放大
        }
      }
    }
  }

  //左右两侧 三个块
  .contetn_lr-item {
    height: 310px;
    background: transparent; // 完全透明背景
    border-radius: 8px;
    // 移除所有边框和阴影效果
    border: none;
    box-shadow: none;
  }

  // 底部横跨整个宽度的组件
  .contetn_bottom_center {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    width: calc(100% - 40px); // 左右各预留20px边距，实现100%宽度
    height: 330px;
    z-index: 10;
    padding: 10px 0 12px 0;
    overflow: visible;

    .contetn_center-bottom {
      height: 318px;
      width: 100%;
      overflow: visible;
      background: transparent; // 完全透明背景
      border-radius: 8px;
      // 移除所有边框和阴影效果
      border: none;
      box-shadow: none;
    }
  }

  // 底部左侧浮动图表
  .floating-bottom-left {
    position: absolute;
    bottom: 370px; // 调整到底部图表上方
    left: 20px;
    width: 450px;
    z-index: 10;
  }

  // 底部右侧浮动图表
  .floating-bottom-right {
    position: absolute;
    bottom: 370px; // 调整到底部图表上方
    right: 20px;
    width: 450px;
    z-index: 10;
  }
}

@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>
